<template>
  <!-- 直接复制默认表格（所有表格）只是修改了一下，表格列 -->
  <div class="query_table_all_container">
    <el-table
      ref="table"
      :data="queryTableAllDataList"
      style="width: 100%"
      :cell-style="{ padding: 0, height: '30px' }"
      :header-cell-style="{
        background: '#f4f4f4',
        padding: 0,
        height: '40px'
      }"
      :height="checkboxSelectValue ? '70vh' : '74vh'"
      highlight-current-row
      show-summary
      sum-text="合计"
      :summary-method="getSummaries"
      @row-click="handleTableRowClick"
    >
      <el-table-column prop="typeNumber" label="款号" sortable width="130">
      </el-table-column>
      <el-table-column prop="colorName" label="颜色" sortable width="100">
      </el-table-column>
      <el-table-column prop="size" label="尺码" sortable> </el-table-column>
      <el-table-column prop="sellingPrice" label="售价" sortable>
      </el-table-column>
      <el-table-column prop="brandedName" label="品牌名称" sortable width="101">
      </el-table-column>
      <el-table-column prop="totalStock" label="总存" sortable>
      </el-table-column>
      <el-table-column prop="repertory" label="库存" sortable>
      </el-table-column>
      <!-- <el-table-column
        prop="virtualRepertory"
        label="虚拟库存"
        sortable
        width="101"
      >
      </el-table-column> -->
      <el-table-column prop="customerRepertory" label="客存" sortable>
      </el-table-column>
      <!-- <el-table-column
        prop="virtualCustomerRepertory"
        label="虚拟客存"
        sortable
        width="101"
      >
      </el-table-column> -->

      <!-- <el-table-column prop="transport" label="在途库存" sortable width="101">
      </el-table-column> -->

      <el-table-column prop="factoryInput" label="厂进" sortable>
      </el-table-column>
      <el-table-column prop="factoryOut" label="厂退" sortable>
      </el-table-column>

      <el-table-column prop="customerInput" label="客进" sortable>
      </el-table-column>
      <el-table-column prop="customerOut" label="客退" sortable>
      </el-table-column>
      <el-table-column prop="customerSell" label="客销" sortable>
      </el-table-column>
      <el-table-column prop="foldNumber" label="调入" sortable>
      </el-table-column>
      <el-table-column prop="calloutNumber" label="调出" sortable>
      </el-table-column>
      <el-table-column prop="differNumber" label="盘差" sortable>
      </el-table-column>
      <!-- <el-table-column prop="name" label="销售金额" sortable width="100px">
      </el-table-column> -->
      <!-- 这里多了一个客存 -->
      <!-- <el-table-column prop="customerRepertory" label="客存" sortable>
      </el-table-column> -->
      <el-table-column
        prop="lastCustomerOrderTime"
        label="客进订日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        label="厂首进日"
        prop="firstFactoryInputTime"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="lastFactoryInputTime"
        label="厂近进日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="firstCustomerInputTime"
        label="客首进日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="lastCustomerInputTime"
        label="客近进日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="firstCustomerOutTime"
        label="客首退日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="lastCustomerOutTime"
        label="客近退日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="firstCustomerSellTime"
        label="客首销日"
        sortable
        width="101"
      >
      </el-table-column>
      <el-table-column
        prop="lastCustomerSellTime"
        label="客近销日"
        sortable
        width="101"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAllInventoryDataApi } from '../../../../request/inventory/inventory_statement.js'
export default {
  props: {
    // 接受父组件传过来的数据渲染表格
    queryTableAllDataList: {
      type: Array,
      default() {
        return []
      }
    },
    // 父组件传过来的多条件查询，是否被点击
    checkboxSelectValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // tableData: [],
    }
  },
  created() {
    // this.getAllInventoryDataApi();
  },
  methods: {
    async getAllInventoryDataApi() {
      const { data: res } = await getAllInventoryDataApi()
      console.log(res)
    },
    // 自定义合计行显示的数据
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // if判断这里才是能指定合计中的每每一列显示什么内容
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (
          index === 1 ||
          index === 2 ||
          index === 3 ||
          index === 4 ||
          index === 5 ||
          index === 6 ||
          index === 14 ||
          index === 15 ||
          index === 16 ||
          index === 17 ||
          index === 18 ||
          index === 19 ||
          index === 20 ||
          index === 21 ||
          index === 22 ||
          index === 23 ||
          index === 24 ||
          index === 25 ||
          index === 26 ||
          index === 27 ||
          index === 28
        ) {
          sums[index] = ''
          return
        }
        // if (index === 10) {
        //   sums[index] = "显示10 ";
        //   return;
        // }
        // if不指定，下面就会自动的操作数据并且合计了，不用手动操作
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += " 元";
          sums[index] += ' '
        } else {
          sums[index] = '0'
        }
      })

      return sums // 会显示这个数组里面的各个Item,那么想要改变的话，直接改变里面的item值就行
    },
    // 分页的逻辑
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 表格的row（行）被单击的时候，触发的函数
    handleTableRowClick(row) {
      console.log(row)
      this.$emit('addImageUrlGiveTatherComponent', row.image, row.typeNumber)
    }
  },
  //下面这个是生命周期函数， 用这个方法重绘表格，就可以先不展示合计行
  updated() {
    this.$refs['table'].doLayout()
  }
}
</script>

<style lang="less" scoped>
// element-ui中的table表格不显示合计，要手动设置才能显示合计
// /deep/.el-table__footer-wrapper {
//   display: block !important;
// }
</style>
